'use strict';
import React,{Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    FlatList
} from 'react-native';
import BootIcon from 'react-native-vector-icons/SimpleLineIcons';
import StyCom from '../../../components/Style';
import BookStatus from 'react-native-vector-icons/FontAwesome';
import Tool from '../../../components/Tool';
import Header from '../../../components/Header';
import {withNavigation} from 'react-navigation';
import Indicator from '../../../components/Indicator';

import moment from 'moment';
const NoticeHead= withNavigation(class NoticeHead extends Component{
    render(){
        return (
            <View style={{flexDirection:'row'}}>
                <TouchableOpacity onPress={()=> this.props.navigation.navigate('NoticeCreate',{headerTitle:'公告创建'})}>
                    <Text style={styles.textSty}>
                        公告创建
                    </Text>
                </TouchableOpacity>
            </View>
        )
    }
})
export default class NoticeMess extends Component{
    constructor(props) {
        super(props);
        this.state = {
            dataList:"",
            notReadNum:0,
            readNum:0,
            historyNum:0,
            abateMes:'',
            message:'数据加载...',
        };
        this.props.navigation.closeDrawer();
    }
    static navigationOptions = {
        header: <Header headerTitle={'公告中心'} headerRight={<NoticeHead/>} />,
    };
    componentDidMount(){
        this._getNoticeNum();
        this._getNoticeList(0);
    }
    _getNoticeList(status){
        let _this = this,pageNum=1,pageSize=15;
        _this.setState({message:'数据加载...'});
        Tool.fetchJson(Tool.appPath.mkst + 'advertise/selectAllAdvertise?status='+status+'&&pageNum='+pageNum+'&&pageSize='+pageSize,'', function (data) {
            if(data.info == null || data.info.list.length ==0){
                _this.setState({
                    dataList:data.info.list,
                    message: '暂无数据!',
                });
            }else{
                _this.setState({
                    dataList:data.info.list,
                    message: '',
                });
            }
        },function (error) {
            _this.setState({message: '暂无数据!'});
        },function () {
        });
    };
    _getNoticeNum() {
        let _this = this;
        Tool.fetchJson(Tool.appPath.mkst + 'advertise/selectAdvertiseNum', '', function (data) {
            _this.setState({
                readNum:data.info.readed,
                historyNum:data.info.overRead,
                notReadNum:data.info.notRead,
            });
        }, function (error) {

        }, function () {

        });
        //this._getNoticeList(0);
    }
    render(){
        var Dimensions = require('Dimensions');
        const width = Dimensions.get('window').width;
        const ViewWidth = width/3;
        return (
            <View style={styles.containerStyle}>
                    <View style = {[styles.headView,{ width:Dimensions.get('window').width}]}>
                        <View style={ {width:ViewWidth, alignItems:'center'}}>
                            <TouchableOpacity style={{paddingRight:5}} onPress={() =>this._getNoticeList(0)}>
                                <Text style={styles.numStyle}>{this.state.notReadNum}</Text>
                                <BookStatus name={'file-text-o'} size={13} style={[styles.iconStyle,{backgroundColor:StyCom.color.blue}]}>

                                </BookStatus>
                                <Text style={{fontSize:StyCom.fontSize.normal}}>未读</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={ {width:ViewWidth,alignItems:'center'}}>
                            <TouchableOpacity style={{paddingRight:5}} onPress={() =>this._getNoticeList(1)}>
                                <Text style={styles.numStyle}>{this.state.readNum}</Text>
                                <BookStatus name={'file-text-o'} size={13} style={[styles.iconStyle,{backgroundColor:StyCom.color.yellow}]}/>
                                <Text style={{fontSize:StyCom.fontSize.normal}} >已读 </Text>
                            </TouchableOpacity>
                        </View>
                        <View style={ {width:ViewWidth,alignItems:'center'}}>
                            <TouchableOpacity onPress={() =>this._getNoticeList(2)}>
                                <Text style={styles.numStyle}>{this.state.historyNum}</Text>
                                <BootIcon name={'book-open'} size={13} style={[styles.iconStyle,{backgroundColor:StyCom.color.green}]}/>
                                <Text style={{fontSize:StyCom.fontSize.normal}}>历史消息 </Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <ScrollView style={[styles.listStyle,{width:Dimensions.get('window').width-20}]}>

                        <FlatList
                            data= {this.state.dataList}
                            keyExtractor={(item,index) => `HomeIndexSwiperItem_${index}`}
                            renderItem={({item}) =>
                                    <View style={{borderBottomWidth:1, borderColor:'#D7D7D7', borderStyle:'dotted',paddingBottom:10,paddingTop:10}}>
                                       <TouchableOpacity style={{flexDirection:'row',}} onPress={()=>this.props.navigation.navigate('NoticeDetail',{headerTitle:item.name,noticeId:item.id})}>
                                            <View style = {{flex:1}}>
                                                <Text style={styles.titleStyle}>{item.name}</Text>
                                                <Text style={[styles.conStyle,{}]}>{item.mgtName}</Text>
                                            </View>
                                            <View style = {{flex:1}}>
                                                <Text
                                                    numberOfLines={1}
                                                    style={[styles.conStyle,{alignSelf:'flex-start',}]}>{item.content}</Text>
                                            </View>
                                            <View style = {{flex:1}}>
                                                <Text style={[styles.timeStyle,{textAlign:'right'}]}>{moment(item.publishTime).format('YYYY-MM-DD')}</Text>
                                                <Text style={styles.abateStyle}>{this.state.abateMes}</Text>
                                            </View>
                                       </TouchableOpacity>
                                    </View>
                            }
                        />
                        <View><Text style={{color:StyCom.color.gray}}>{this.state.message}</Text></View>
                    </ScrollView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    textSty:{
        fontSize:StyCom.fontSize.small,
        color:StyCom.color.white,
    },
    abateStyle:{
        color:StyCom.color.red,
        fontSize:StyCom.fontSize.normal
    },
    numStyle:{
        left:18,
        position: 'absolute',
        zIndex:9999,
        alignSelf:'flex-end',
        color:'#fff'
        ,textAlign:'center',
        backgroundColor: StyCom.color.red,
        width: 15,
        height: 15,
        borderRadius: 15,
        fontSize:StyCom.fontSize.small,
    },
    iconStyle:{
        width:30,
        height:30,
        borderRadius:50,
        color:"#fff",
        padding:8
    },
    titleStyle:{
        fontSize:StyCom.fontSize.normal,
        color:'#191919',
    },
    conStyle:{
        fontSize:StyCom.fontSize.small,
    },
    timeStyle:{
        fontSize:StyCom.fontSize.normal,
    },
    containerStyle:{
        flex:1,
        backgroundColor:StyCom.color.lightGray,
        alignItems:'center',
    },
    headView:{
        flex:0.2,
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:'#fff',

    },
    listStyle:{
        flex:0.6,
        borderTopLeftRadius:15,
        borderTopRightRadius:15,
        backgroundColor:'#fff',
        marginTop:-10,
        shadowColor:'#c0c0c0',
        elevation: 4,
        paddingRight:10,
        paddingLeft:10,
    },
})